<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
</script>

<template>
  <div class="container">
    <div class="error-page">
      <div class="illustration">
        <svg viewBox="0 0 100 100" class="lost">
          <!--迷路的小人-->
          <circle cx="50" cy="50" r="40" fill="#2196F3" stroke="#0157b4" stroke-width="2"/>
          <circle cx="50" cy="45" r="5" fill="#0157b4"/>
          <circle cx="50" cy="55" r="5" fill="#0157b4"/>
          <!--标示404的框-->
          <rect x="20" y="70" width="60" height="30" fill="#ffffff" stroke="#b71c1c" stroke-width="2"/>
          <text x="32" y="90" font-size="20" font-family="Arial" fill="#b71c1c">404</text>
        </svg>
      </div>
      <h1 class="error-title">非常抱歉! 页面未找到</h1>
      <p class="error-message">
        您访问的页面可能已经被删除或暂时无法访问。
      </p>
      <button class="home-button" @click="router.push('/')">返回主页</button>
    </div>
  </div>
</template>



<style lang="scss">
.container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
}

.error-page {
  text-align: center;
  padding: 2rem;
}

.illustration {
  margin: 2rem 0;
}

.lost {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.error-title {
  color: #1a1a1a;
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: bold;
}

.error-message {
  color: #666;
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 400px;
  margin: 0 auto 2rem;
}

.home-button {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background-color: #2196F3;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
  font-size: 1.1rem;
  cursor: pointer;
}

.home-button:hover {
  background-color: #0157b4;
}

@media (max-width: 480px) {
  .error-title {
    font-size: 2rem;
  }
  .lost {
    width: 180px;
    height: 180px;
  }
}
</style>